import React from 'react';
import { Tabs, List, Avatar, Badge, Space, Typography } from 'antd';
import { MessageOutlined, BellOutlined, UserOutlined } from '@ant-design/icons';
import styled from 'styled-components';

const { Text } = Typography;

interface Notification {
    id: number;
    title: string;
    content: string;
    time: string;
    isRead: boolean;
}

interface Chat {
    id: number;
    name: string;
    lastMessage: string;
    time: string;
    unread: number;
}

const StyledList = styled(List)`
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
`;

const MessageItem = styled(List.Item)`
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: #f5f5f5;
  }
`;

const Messages: React.FC = () => {
    const notifications: Notification[] = [
        {
            id: 1,
            title: '活动提醒',
            content: '您报名的"周末篮球友谊赛"将在明天开始',
            time: '10分钟前',
            isRead: false
        },
        {
            id: 2,
            title: '系统通知',
            content: '您的账号已成功绑定手机号',
            time: '1小时前',
            isRead: true
        },
        {
            id: 3,
            title: '活动提醒',
            content: '您关注的"城市摄影探索"活动已开始报名',
            time: '2小时前',
            isRead: true
        }
    ];

    const chats: Chat[] = [
        {
            id: 1,
            name: '篮球爱好者群',
            lastMessage: '明天见！',
            time: '10分钟前',
            unread: 3
        },
        {
            id: 2,
            name: '摄影交流群',
            lastMessage: '分享几张今天拍的照片',
            time: '1小时前',
            unread: 0
        },
        {
            id: 3,
            name: '读书会',
            lastMessage: '下周三的读书分享会主题已定',
            time: '2小时前',
            unread: 1
        }
    ];

    const tabItems = [
        {
            key: '1',
            label: (
                <span>
                    <BellOutlined /> 通知
                </span>
            ),
            children: (
                <List<Notification>
                    itemLayout="horizontal"
                    dataSource={notifications}
                    renderItem={item => (
                        <MessageItem>
                            <List.Item.Meta
                                avatar={<Avatar icon={<BellOutlined />} />}
                                title={
                                    <Space>
                                        <Text strong>{item.title}</Text>
                                        {!item.isRead && <Badge status="processing" />}
                                    </Space>
                                }
                                description={
                                    <Space direction="vertical" size={0}>
                                        <Text>{item.content}</Text>
                                        <Text type="secondary" style={{ fontSize: '12px' }}>{item.time}</Text>
                                    </Space>
                                }
                            />
                        </MessageItem>
                    )}
                />
            ),
        },
        {
            key: '2',
            label: (
                <span>
                    <MessageOutlined /> 聊天
                </span>
            ),
            children: (
                <List<Chat>
                    itemLayout="horizontal"
                    dataSource={chats}
                    renderItem={item => (
                        <MessageItem>
                            <List.Item.Meta
                                avatar={
                                    <Badge count={item.unread} offset={[-5, 5]}>
                                        <Avatar icon={<UserOutlined />} />
                                    </Badge>
                                }
                                title={
                                    <Space>
                                        <Text strong>{item.name}</Text>
                                    </Space>
                                }
                                description={
                                    <Space direction="vertical" size={0}>
                                        <Text>{item.lastMessage}</Text>
                                        <Text type="secondary" style={{ fontSize: '12px' }}>{item.time}</Text>
                                    </Space>
                                }
                            />
                        </MessageItem>
                    )}
                />
            ),
        },
    ];

    return (
        <div>
            <Tabs defaultActiveKey="1" items={tabItems} />
        </div>
    );
};

export default Messages; 